<template>
	<el-dialog v-model="isVisible" title="链接" width="500px" :before-close="handleClose">
		<div>页面路径</div>
		<div class="flex-center mt10 mb10">
			<el-input :value="`/pages/LotteryDraw/index?id=${row?.id}`"></el-input>
			<el-button class="ml20" type="primary" v-copy="`/pages/LotteryDraw/index?id=${row?.id}`"> 复制 </el-button>
		</div>
		<div class="mt30 mb10">支付宝完整链接</div>
		<div class="flex-center">
			<el-input :value="`alipays://platformapi/startapp?appId=2021004163648603&page=pages/LotteryDraw/index?id=${row?.id}`"></el-input>
			<el-button
				class="ml20"
				type="primary"
				v-copy="`alipays://platformapi/startapp?appId=2021004163648603&page=pages/LotteryDraw/index?id=${row?.id}`"
			>
				复制
			</el-button>
		</div>
		<div class="mt30 mb10">微信完整链接</div>
		<div class="flex-center">
			<el-input :value="`weixin://dl/business/?appid=wx89ead7620fdb1998&path=pages/LotteryDraw/index&query=id=${row?.id}`"></el-input>
			<el-button
				class="ml20"
				type="primary"
				v-copy="`weixin://dl/business/?appid=wx89ead7620fdb1998&path=pages/LotteryDraw/index&query=id=${row?.id}`"
			>
				复制
			</el-button>
		</div>
	</el-dialog>
</template>

<script setup lang="tsx">
import { ref, watch } from 'vue';

const props = defineProps({
	// 列表内容
	visible: {
		type: Boolean,
		default: () => false,
	},
	row: {
		type: Object,
		default: () => null,
	},
});

const emit = defineEmits(['handleClose']);

const isVisible = ref(false);

watch(
	() => props.visible,
	(val) => {
		isVisible.value = val;
	},
	{
		immediate: true,
	}
);

const handleClose = () => {
	emit('handleClose');
};
</script>

<style lang="scss">
.good-service-form {
	.el-form-item {
		width: 90%;
		.el-input-number {
			width: 100%;
		}
	}
}
</style>
